<template>
    <div ref="scrollRef" style="height:100%;width:100%;overflow-y: scroll;">
        <div class="iconNew" @click="addEssay">
            <Promotion style="width: 2rem; height: 2rem; margin-right: 8px;color: #39bfc4;" />
        </div>
        <div v-for="item in data.value" :key="item.id">
            <div
                style="font-size: 0.8rem;min-height: 20vh;background-color: #fff;margin: 1rem;padding: 1rem;border-radius: 10px;color: #777;">
                <div style="display: flex;">
                    <div class="title">标题</div>
                    <div style="flex: 7;"> {{ item.title }}</div>
                </div>
                <div style="display: flex;margin-top: 1rem;">
                    <div class="title">作者</div>
                    <div style="flex: 7;"> {{ item.user }}</div>
                </div>
                <div style="display: flex;margin-top: 1rem;">
                    <div class="title">描述</div>
                    <div style="flex: 7;"> {{ item.des }}</div>
                </div>
                <div style="display: flex;margin-top: 1rem;">
                    <div class="title">时间</div>
                    <div style="flex: 7;"> {{ item.createTime }}</div>
                </div>
            </div>
        </div>
        <div class="page" @click="nextpage">
            点击加载更多
        </div>
    </div>
    <!-- 弹窗对话框 -->
    <el-dialog v-model="isShow" title="添加文章" width="70%" :before-close="handleClose">
        <el-form :label-position="'right'" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="标题">
                <el-input v-model="formLabelAlign.title" />
            </el-form-item>
            <el-form-item label="内容">
                <el-input type="textarea" v-model="formLabelAlign.des" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="submitHandler">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { userStore } from "../../../store/index.ts"
const store = userStore()
let data = reactive(store.$state.essayList)
const scrollRef = ref()
type pageType = {
    page: number,
    pagesize: number
}
let pageInfo = reactive({
    page: 0,
    pagesize: 5
} as pageType)
const findList = async (type:string) => {
    await store.selectEssay(pageInfo,type)
    data.value = reactive(store.$state.essayList)
    console.log("查询文章2",data);
}
findList('update')

// 新增文章操作
type essay = {
    id: number,
    title: string,
    user: string,
    createTime: string,
    des: string,
}

let isShow = ref(false)
let formLabelAlign = reactive({} as essay)

const addEssay = () => {
    isShow.value = true
}
const handleClose = () => {
    isShow.value = false
}
const submitHandler = async ()=>{
    isShow.value = false
    formLabelAlign.user = store.$state.userInfo.username
    const result = await store.addEssayHandler(formLabelAlign)
    console.log("新增结果~~~~~~~~~~~~~",result);
    formLabelAlign.des = ''
    formLabelAlign.user = ''
    formLabelAlign.title = ''
    pageInfo.page = 0
    findList('update')
}

const nextpage = ()=>{
    console.log("下一页");
    pageInfo.page++
    findList('')
}


</script>
<style scoped>
.content {
    background-image: url(/vite.svg);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.2;
    background-position: center;
    /* 将背景图居中显示 */
}

.title {
    flex: 2;
    font-weight: bold;
}

.iconNew {
    position: fixed;
    bottom: 10%;
    right: 10%;
    opacity: 0.6;
}
.page{
    /* position: fixed;
    bottom: 1%; */
    text-align: center;
    width: 100%;
    color: #aaa;
}
</style>